<template>
  <div>
    <div>
      <div class=" domain"
           :class="domainData.className + ' ' +viewCurrent.frameworkType.toLowerCase()">
        <h2 :class="'icon-'+ domainData.className"
            style="font-size:20px;font-family: Regular;">{{ getTranslate(domainData.name) }}</h2>
        <!-- 新增 hideDescription 属性，控制描述展示 -->
        <p v-if="domainData.description && !barSet.hideDescription"
           style=" font-size: 15px; margin: 0 0 10px 0; "> {{ getTranslate(domainData.description) }} </p>
        <!-- 特殊格式领域 ELD -->
        <div v-if="domainData.className == 'eld' && barSet.height != 'small'  ">
          <div class="rating-key eld"
               style="margin: 15px 0 15px 0;padding: 15px 5px;">
            <table class="rating-table rating-table-eld"
                   style="width:100%">
              <tbody>
                <tr>
                  <th style="width:12%;padding: 1.5% 0px 0 0;text-align: center;">
                    {{$t("loc.ratingPeriod")}}

                  </th>
                  <td>
                    <div class="flex fill"
                         style="width:80%">
                      <div class="dl item item-img">
                        <span v-html="$t('loc.dl')"></span>
                      </div>
                      <div class="de item item-img">
                        <span v-html="$t('loc.de')"></span>
                      </div>
                      <div class="ee item item-img">
                        <span v-html="$t('loc.ee')"></span>
                      </div>
                      <div class="deve item item-img">
                        <span v-html="$t('loc.deve')"></span>
                      </div>
                      <div class="be item item-img">
                        <span v-html="$t('loc.be')"></span>
                      </div>
                      <div class="ie item item-img">
                        <span v-html="$t('loc.ie')"></span>
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div v-else-if="domainData.className == 'span' && barSet.height != 'small'  ">
          <div class="rating-key span"
               style="margin: 15px 0 15px 0;padding: 15px 5px;">
            <table class="rating-table rating-table-span"
                   style="width:100%">
              <tbody>
                <tr>
                  <th style="width:12%;padding: 1.5% 0px 0 0;text-align: center;">
                    {{$t("loc.ratingPeriod")}}
                  </th>
                  <td>
                    <div class="flex fill"
                         style="width:80%">
                      <div class="ds item item-img">
                        <span v-html="$t('loc.ds')"></span>
                      </div>
                      <div class="es item item-img">
                        <span v-html="$t('loc.es')"></span>
                      </div>
                      <div class="devs item item-img">
                        <span v-html="$t('loc.devs')"></span>
                      </div>
                      <div class="bs item item-img">
                        <span v-html="$t('loc.bs')"></span>
                      </div>
                      <div class="is item item-img">
                        <span v-html="$t('loc.ins')"></span>
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

        </div>
        <div v-if="barSet.height != 'mini'">
          <div v-if="aliasDataList.length > 0">
            <!-- :style="{'height': barSet.height == 'small'?'80px':'60px'}"
                    style="position: relative;" -->
            <el-row class="margin-b-10"
                    v-for="(aliasData, index) in aliasDataList"
                    :key="aliasData.alias">

              <el-col v-if="false"
                      :span="3"
                      class="aliasFont"
                      style="  position: absolute; bottom: 0px; left: 0px;">

                <div v-show=" special.includes(domainData.className) && barSet.height == 'small'"
                     style="
                        margin: 0px 0px 8%;
                        font-family: none;
                        font-weight: 500;
                        font-size: 14px;
                    ">{{$t("loc.ratingPeriod")}}
                  <br>{{$t("loc.ofChild")}}
                </div>
                {{ getTranslate(aliasData.alias)}}
              </el-col>

              <!-- 引入进度条  style="  position: absolute; bottom: 0px; left: 12.5%;" -->
              <el-col :span="24">
                <div v-if="!aliasData.noScore">
                  <ProportionBar v-if="barSet"
                                 :symbol="barSet.symbol"
                                 :showType="barSet.showType"
                                 :offset="barSet.offset"
                                 :height="barSet.height"
                                 :specialAttr="domainData.className"
                                 :aliasData="aliasData"
                                 :levelTemplates="domainData.levelTemplates"
                                 :viewCurrent="viewCurrent"
                                 :showAllAlias="showAllAlias"
                                 :showLevel="index == 0"
                                 :getTranslate="getTranslate">
                  </ProportionBar>
                </div>
                <div v-else>
                  <ProportionBar v-if="barSet"
                                 :symbol="barSet.symbol"
                                 showType="noData"
                                 :offset="barSet.offset"
                                 :height="barSet.height"
                                 :viewCurrent="viewCurrent"
                                 :aliasData="aliasData"
                                 :levelTemplates="null"
                                 :specialAttr="domainData.className"
                                 :showAllAlias="showAllAlias"
                                 :showLevel="index == 0"
                                 :getTranslate="getTranslate">
                  </ProportionBar>
                </div>
              </el-col>
            </el-row>
            <!-- <p></p> -->
          </div>
          <div v-else>
            <!-- :style="{'height': barSet.height == 'small'?'80px':'60px'}"
                    style="position: relative;" -->
            <el-row class="margin-b-10">
              <el-col v-if="false"
                      :span="3"
                      class="padding-top-1_5 aliasFont"
                      style="  position: absolute; bottom: 0px; left: 0px;">
                {{getTranslate(viewCurrent.displayAlias)}}
              </el-col>
              <!-- 引入进度条  style="  position: absolute; bottom: 0px; left: 12.5%;" -->
              <el-col :span="24">
                <ProportionBar v-if="barSet"
                               :symbol="barSet.symbol"
                               showType="noData"
                               :offset="barSet.offset"
                               :height="barSet.height"
                               :viewCurrent="viewCurrent"
                               :aliasData="null"
                               :levelTemplates="null"
                               :showAllAlias="showAllAlias"
                               :specialAttr="domainData.className"
                               :getTranslate="getTranslate">
                </ProportionBar>
              </el-col>
            </el-row>
            <!-- <p></p> -->
          </div>
          <div v-if=" barSet.height=='small'"
               class="padding-tip margin-b-10"
               style="background: #f6f9f9;font-size:15px;border:1px solid #e3e3e3">
            <span v-if="aliasDataList.length > 0 && domainData.levelMessage && domainData.levelMessage.trim().length > 0">
              {{ getTranslate(domainData.levelMessage) }}
            </span>
            <span v-else>
              {{$t("loc.noDescriptor")}}
            </span>
          </div>
        </div>
        <div v-else>
          <div v-if="domainData.distributionDataList.length > 0">
            <div v-for="(data) in domainData.distributionDataList"
                 :key="data.alias">
              <!--  :style="{'height': barSet.height == 'small'?'80px':'50px'}"   style="position: relative;" -->
              <el-row class="margin-b-10">
                <el-col v-if="false"
                        :span="3"
                        class="aliasFont"
                        style=" position: absolute;  left: 0px;"
                        :style="data.scoreLeft == 0 ? {'bottom':'0'}:{}">

                  <!-- <div v-show=" special.includes(domainData.className) && barSet.height == 'small'"
                    style="
                        margin: 0px 0px 8%;
                        font-family: none;
                        font-weight: 500;
                        font-size: 14px;
                    ">Rating Period
                  <br>(# of child)
                </div> -->
                  {{ getTranslate(data.alias)}} <br /> {{'(n='+data.count+')'}}
                </el-col>

                <!-- 引入进度条 style="  position: absolute; bottom: 0px; left: 12.5%;"-->
                <el-col :span="24">
                  <ProportionBar v-if="barSet"
                                 :symbol="barSet.symbol"
                                 :showType="barSet.showType"
                                 :offset="barSet.offset"
                                 :precentText="barSet.precentText"
                                 :height="barSet.height"
                                 :specialAttr="domainData.className"
                                 :aliasData="data"
                                 :showAllAlias="showAllAlias"
                                 :levelTemplates="data.scoreLeft != 0? data.levelDataList.map(x=>x.className) : null"
                                 :getTranslate="getTranslate">
                  </ProportionBar>
                </el-col>
              </el-row>
              <div v-if="false && Array.isArray(data.filterCohortList)">
                <el-row class="margin-b-10"
                        v-for="(data,index) in data.filterCohortList"
                        :key="index"
                        :style="{'height': barSet.height == 'small'?'80px':'40px'}"
                        style="position: relative;">
                  <div>
                    <el-col :span="3"
                            class="aliasFont"
                            style="  position: absolute;  left: 0px;"
                            :style="data.scoreLeft == 0 ? {'bottom':'0'}:{}">

                      <!-- <div v-show=" special.includes(domainData.className) && barSet.height == 'small'"
                        style="
                            margin: 0px 0px 8%;
                            font-family: none;
                            font-weight: 500;
                            font-size: 14px;
                        ">Rating Period
                      <br>(# of child)
                    </div> -->
                      {{getTranslate(data.name)}} <br /> {{'(n='+data.count+')'}}
                    </el-col>

                    <!-- 引入进度条 -->
                    <el-col :span="21"
                            style="  position: absolute; bottom: 0px; left: 12.5%;">
                      <ProportionBar v-if="barSet"
                                     :symbol="barSet.symbol"
                                     showType="attrCompare"
                                     :offset="barSet.offset"
                                     :precentText="barSet.precentText"
                                     :height="barSet.height"
                                     :specialAttr="domainData.className"
                                     :aliasData="data"
                                     :showAllAlias="showAllAlias"
                                     :levelTemplates="data.scoreLeft != 0? data.levelDataList.map(x=>x.className) : null"
                                     :getTranslate="getTranslate">
                      </ProportionBar>
                    </el-col>
                  </div>
                </el-row>
              </div>
            </div>
            <!-- <p></p> -->
          </div>
          <div v-else>
            <el-row class="margin-b-10"
                    :style="{'height': barSet.height == 'small'?'80px':'50px'}"
                    style="position: relative;">
              <el-col v-if="false"
                      :span="3"
                      class="padding-top-1_5 aliasFont"
                      style="  position: absolute; bottom: 0px; left: 0px;">
                {{getTranslate(viewCurrent.displayAlias)}}
              </el-col>
              <!-- 引入进度条 -->
              <el-col :span="21"
                      style="  position: absolute; bottom: 0px; left: 12.5%;">
                <ProportionBar v-if="barSet"
                               :symbol="barSet.symbol"
                               showType="noData"
                               :offset="barSet.offset"
                               :height="barSet.height"
                               :viewCurrent="viewCurrent"
                               :aliasData="null"
                               :levelTemplates="null"
                               :showAllAlias="showAllAlias"
                               :specialAttr="domainData.className"
                               :getTranslate="getTranslate">
                </ProportionBar>
              </el-col>
            </el-row>
            <!-- <p></p> -->
          </div>

        </div>
        <p></p>
      </div>

    </div>
  </div>
</template>

<script>

import ProportionBar from './ProportionBar'

export default {
  name: 'Temptltem',
  components: {
    ProportionBar
  },
  props: {
    domainData: {
      type: Object
    },
    barSet: {
      type: Object
    },
    showAllAlias: {
      type: Boolean,
      default: false
    },
    viewCurrent: {
      type: Object
    },
    displayAlias: {
      type: String
    },
    getTranslate: {
     type: Function,
     default: (message) => { return message }
    }
  },
  data () {
    return {
      special: ['eld', 'span']

    }
  },
  computed: {
    aliasDataList () {
      if (!this.showAllAlias) {
        return this.domainData.aliasDataList.filter(x => this.viewCurrent.displayAlias == x.alias)
      }
      return this.domainData.aliasDataList
    }
  },
  methods: {}
}
</script>

<style scoped lang="less">
.button {
  display: inline-block;
  // line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  color: #606266;
  -webkit-appearance: none;
  text-align: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 500;
  padding: 11px 16px;
  font-size: 14px;
  border-radius: 4px;
}

.menuLocation {
  position: relative;
  top: -30px;
  right: -182px;
  background: #fff;
}
.noneClass {
  display: none;
}
.showClass {
  display: block;
}
.classStyle {
  //  border: 1px solid;
  width: 100%;
  height: 39px;
  padding: 7px;
}

.childName {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 400;
  font-family: 'Helvetica Neue';
}
.list {
  padding-left: 0;
  color: #444444;
  li {
    margin-bottom: 10px;
    background: #fff;
  }
  li:hover {
    color: #0095c1;
    background-color: aliceblue;
  }
}
.ull > li li:hover {
  color: #0095c1;
  background-color: aliceblue;
}
.ull > li li {
  color: #606266;
}
.ull > li:hover {
  color: #0095c1;
  background-color: aliceblue;
}
// li .button:hover {

// }
.aliasFont {
  font-weight: 700;
  font-size: 13px;
  font-family: 'Roboto';
  line-height: 16px;
}

.margin-b-5 {
  margin-bottom: 5px;
}
.margin-5 {
  margin: 5px 0px;
}
.margin-b-10 {
  margin-bottom: 10px;
}

.padding-tip {
  padding: 10px 20px;
}
.padding-top-1_5 {
  padding-top: 0.5%;
}
.padding-top-7_5 {
  padding-top: 7.5%;
}

.white-backGroud {
  background: #fff;
}
.child-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.avatar1 {
  width: 40px;
  height: 40px;
  margin-right: 15px;
}
.border-right {
  border-right: 1px solid #ecedf1 !important;
}
</style>
